<template>
  <div class="map">
    <div class="map-container"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import { getProvinceMapInfo } from '@/utils/map_utils'

import useEchartsData from '@/store/useEchartsData'
import mapData from '../../../public/static/map/china.json'
import * as echarts from 'echarts'
import throttleFn from '@/utils/throttle';
import axios from 'axios'
import { province } from '@/types/mapType'
//仓库
const store = useEchartsData()

//容器
let mychart: any
let container: HTMLElement

let provinceData: province = new Map()
//配置中国地图配置
const setOption = () => {



  mychart = echarts.init(document.querySelector('.map-container') as HTMLElement, 'dark-blue')
  //注册地图
  echarts.registerMap('china', JSON.stringify(mapData))
  //标题字体大小
  const titleSize = container.offsetWidth / 100 * 2
  let options = {
    title: {
      text: 'ヾ(≧▽≦*)o商家分布',
      left: '5%',
      top: '5%',
      textStyle: {
        fontSize: titleSize
      },
    },

    geo: {
      type: 'map',
      map: 'china',
      top: '5%',
      bottom: '5%',
      itemStyle: {
        areaColor: '#FFB4B4',
        borderColor: '#333',
      },
      emphasis: {


        itemStyle: {
          areaColor: '#FFF',//鼠标放到地图上显示的颜色（黄色）
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    legend: {
      left: '5%',
      bottom: '5%',
      orient: 'vertical'
    },

  }

  mychart.setOption(options)

  //echats地图下钻
  mychart.on('click', async function (parmas: any) {


    let pathObj = getProvinceMapInfo(parmas.name)
    if (!provinceData.get(pathObj.key)) {
      let result = await axios.get('http://localhost:5173' + pathObj.path)
      provinceData.set(pathObj.key, result.data)
    }



    //注册地图
    echarts.registerMap(pathObj.key, provinceData.get(pathObj.key))
    let newOptions = {
      title: {
        text: parmas.name,

      },
      geo: {

        map: pathObj.key,

      }
    }

    mychart.setOption(newOptions)
  })

  //双击退出当前省份地图
  container.addEventListener('dblclick', backChina)
}

//更新地图配置函数
const upDataMap = () => {
  //图例
  let leagenArr = store.MapList.map(item => {
    return item.name
  })
  //散点数据
  let sericeArr = store.MapList.map(item => {
    return {
      type: 'effectScatter',
      //启用坐标系
      coordinateSystem: 'geo',
      data: item.children,
      name: item.name,
    }
  })

  let newOption = {
    legend: {
      type: 'plain',
      data: leagenArr
    },
    series: sericeArr
  }

  mychart.setOption(newOption)
}

//尺寸自适应回调函数
const resizeMap = () => {


  //获取标题字体大小
  return throttleFn(function () {
    const titleSize = container.offsetWidth / 100 * 2
    const newOption = {
      title: {
        textStyle: {
          fontSize: titleSize
        },
      }
    }
    mychart.setOption(newOption)
    mychart.resize()
  }, 100)


}

//双击回到中国地图
const backChina = () => {


  let newOption = {
    title: {
      text: 'ヾ(≧▽≦*)o商家分布',
      textStyle: {
        fontSize: container.offsetWidth / 100 * 2
      },
    },

    geo: {
      map: 'china'
    }
  }

  mychart.setOption(newOption)
}

onMounted(async () => {
  try {
    await store.getMapData()
  } catch (error) {
    console.log(error);
  }
  //获取容器 动态取得标题大小
  container = document.querySelector('.map-container') as HTMLElement
  //初始化图表
  setOption()
  //更新地图配置
  upDataMap()
  //地图尺寸自适应
  window.addEventListener('resize', resizeMap())
})


//组件销毁
onUnmounted(() => {
  //注销监听
  window.removeEventListener('resize', resizeMap)
  // container.removeEventListener('dblclick', backChina)
})

</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;

  .map-container {
    width: 100%;
    height: 100%;
  }
}
</style>